import React, { useState } from 'react';
import { Modal, Button, message } from 'antd';
import EditMemorandum from './EditMemorandum';
export default function MemorandumModal(props) {
  const { isModalVisible, setisModalVisible, time, list, setList, handleSave } =
    props;
  const [hasEdit, sethasEdit] = useState(false);

  return (
    <Modal
      title="Integration memo"
      destroyOnClose
      keyboard
      maskClosable
      onCancel={() => setisModalVisible(false)}
      visible={isModalVisible}
      footer={[
        <Button
          key="back"
          onClick={() => {
            setisModalVisible(false);
            message.warning("You haven't saved!");
          }}
        >
          Cancel
        </Button>,
        <Button key="save" type="primary" danger onClick={handleSave}>
          Save
        </Button>,
      ]}
    >
      <div style={{ display: 'flex', justifyContent: 'space-evenly' }}>
        {time.map((i, index) => (
          <Button
            key={index}
            shape="round"
            onClick={() => {
              sethasEdit(true);
              setList(i);
            }}
          >
            {i.timeName}
          </Button>
        ))}
      </div>
      <EditMemorandum
        hasEdit={hasEdit}
        sethasEdit={sethasEdit}
        list={list}
        setList={setList}
      />
    </Modal>
  );
}
